<template>
    <el-dialog v-dialogDrag title="修改" :close-on-click-modal="false" :visible.sync="visible" @close="handleClose" :center="true">
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
            <el-form-item label="用户类型">
                <span>{{ otherForm.userType | userTypeTranslate }}</span>
            </el-form-item>

            <el-form-item label="商户类型">
                <span>{{ otherForm.merchantType | commercialype }}</span>
            </el-form-item>

            <el-form-item label="帐号">
                <span>{{ otherForm.userId }}</span>
            </el-form-item>

            <el-form-item label="手机号">
                <span>{{ otherForm.phone }}</span>
            </el-form-item>

            <el-form-item label="选择角色">
                <el-select v-model="roleTypeName" placeholder="请选择" style="width: 100%">
                    <el-option v-for="(item, index) in roleOptions" :key="index" :label="item.rolename" :value="item.roleId"> </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading">确定</el-button>
        </span>
    </el-dialog>
</template>
<script>
import API from '@/api';
import cloneDeep from 'lodash/cloneDeep';
import { commercialUserType, userType } from '../../utils/util';
export default {
    filters: {
        userTypeTranslate(val) {
            return userType(val);
        },
        commercialype(val) {
            return commercialUserType(val);
        }
    },
    data() {
        return {
            roleTypeName: '',
            roleOptions: [],
            visible: false,
            dataForm: {
                roleType: ''
            },
            otherForm: {},
            btnLoading: false,
            dialogType: 1
        };
    },

    methods: {
        handleClose() {
            this.dataForm = {};
            this.otherForm = {};
            this.roleTypeName='';
            this.$refs['dataForm'].resetFields();
        },

        init(item, type) {
            this.visible = true;
            this.getList(item);

            this.dialogType = type;
            if (item && type == 2) {
                this.otherForm = item;
                this.dataForm.userId = item.userId;
            }
        },

        getList(item) {
            var data = {
                userId: item.userId
            };

            API.role.getSelectRoleList(data).then((res) => {
                this.roleOptions = res.result;

                for (var i = 0; i < this.roleOptions.length; i++) {
                    //配置 下拉框默认选中
                    if (this.roleOptions[i].selected) {
                        this.dataForm.roleType = this.roleOptions[i].roleId;
                        this.roleTypeName = this.roleOptions[i].rolename;
                    }
                }
            });
        },

        getType(name) {
            if (this.isChinese(name)) {
                //全是中文，代表用户没有选择，为默认值，或者
                for (var i = 0; i < this.roleOptions.length; i++) {
                    if (this.roleOptions[i].rolename === name) {
                        this.dataForm.roleType = this.roleOptions[i].roleId;
                        return this.roleOptions[i].roleId;
                    }
                }
            } else {
                //选择之后，name为代码id
                for (var i = 0; i < this.roleOptions.length; i++) {
                    if (this.roleOptions[i].roleId === name) {
                        this.dataForm.roleType = this.roleOptions[i].roleId;
                        return this.roleOptions[i].roleId;
                    }
                }
            }
        },

        //是否全是 中文
        isChinese(temp) {
            var re = /[^\u4e00-\u9fa5]/;
            if (re.test(temp)) return false;
            return true;
        },

        // 表单提交
        dataFormSubmit() {
            console.log(this.dataForm);

            if(this.getType(this.roleTypeName)==null){

                this.$message.error('请选择角色');

                return ;

            }
         
            var parm = {
                roleIds: [this.getType(this.roleTypeName)],
                userId: this.dataForm.userId
            };

            
            // 1. 新增    ,   2.编辑
            var tick = this.dialogType == 1 ? API.role.addAccountRole(parm) : API.role.editUserRoles(parm);
            this.btnLoading = true;
            tick.then((data) => {
                if (data.code == '0000') {
                    this.$message({
                        message: `${this.type == 1 ? '新增成功' : '修改成功'}`,
                        type: 'success',
                        duration: 1500,
                        onClose: () => {
                            this.visible = false;
                            this.$emit('refreshDataList');
                        }
                    });
                }
                this.btnLoading = false;
            });
        }
    }
};
</script>å